<template>
    <view>
        <!-- pages/user/integral/index.wxml -->
        <!-- 头部 -->
        <navber id="head-navber" :navbarData="navbarData"></navber>

        <!-- 积分 -->
        <view class="statistics">
            <view class="statistics-info">
                <view :class="active == 1 ? 'active' : ''" @tap="onActive($event, { num: '1' })" data-num="1">3 天</view>
                <view :class="active == 2 ? 'active' : ''" @tap="onActive($event, { num: '2' })" data-num="2">7 天</view>
                <view :class="active == 3 ? 'active' : ''" @tap="onActive($event, { num: '3' })" data-num="3">15天</view>
                <view :class="active == 4 ? 'active' : ''" @tap="onActive($event, { num: '4' })" data-num="4">30天</view>
            </view>
            <view class="statistics-all">
                总消费：
                <span>￥{{ all_total }}</span>
            </view>
        </view>

        <!-- 统计记录 -->
        <view class="statistics-list">
            <view class="statistics-item" v-for="(item, index) in data" :key="index">
                <view class="progress-class-text">
                    <view class="lable-text">
                        {{ item.name }}
                        <span>{{ item.rate }}%</span>
                    </view>
                    <view class="lable-num">￥{{ item.total }}</view>
                </view>

                <view class="progress-class">
                    <view class="progress-class-bg"></view>
                    <view class="progress-class-rate" :style="'width:' + item.rate + '%'"></view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import navber from '@/components/navber/index';
// pages/user/integral/index.js
const Config = require('../../../../config/index.js');

const Api = require('../../../../api/index.js');

export default {
    components: {
        navber,
    },
    data() {
        return {
            navbarData: {
                title: '消费统计' //顶部标题
            },
            //导航栏
            imgUrl: Config.imgUrl,
            //图片url
            data: [],
            active: 1,
            all_total: 0
        };
    },
    onReachBottom: function (e) {},
    onShow() {
        this.getData(1);
    },
    onPullDownRefresh(e) {
        uni.stopPullDownRefresh();
    },
    methods: {
        onActive(e, _dataset) {
            
            if (!e.currentTarget) {
                if (_dataSet.tagId) {
                    e.currentTarget = {
                        id: _dataSet.tagId
                    };
                } else {
                    e.currentTarget = {
                        dataset: _dataSet
                    };
                }
            }
            
            let num = parseInt(e.currentTarget.dataset.num);
            this.setData({
                active: num
            });
            this.getData(num);
        },

        getData(type) {
            let that = this;
            Api.userOrderStatistics({
                type: type
            }).then((res) => {
                that.setData({
                    data: res.data.list,
                    all_total: res.data.all_total
                });
            });
        }
    }
};
</script>
<style>
@import './index.css';
</style>
